<script setup lang="ts">
import { defineProps } from "vue";
import type { DistributionDeviceStatus } from "./types";

const props = defineProps({
  items: {
    type: Array as () => DistributionDeviceStatus[],
    required: true
  }
});
</script>

<template>
  <div>
    <el-card
      class="card-content-container"
      v-for="(item, index) in props.items"
      :key="index"
      shadow="hover"
    >
      <div class="card-title">
        <router-link to="">{{ item.title }}</router-link>
      </div>
      <div
        v-for="(characteristicItem, propIndex) in item.characteristicItems"
        :key="propIndex"
        class="card-content-container-title"
      >
        <div class="title">{{ characteristicItem.label }}：</div>
        <div class="value">{{ characteristicItem.value }} {{ characteristicItem.unit }}</div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.card-content-container {
  .card-content-container-title {
    margin-top: 10px;
    .title {
      display: inline-block;
      width: 60%;
    }
    .value {
      display: inline-block;
    }
  }
  .card-title a {
    color: rgb(0, 247, 255);
    text-decoration: none;
    font-weight: bold;
  }
}
.card-content-container:nth-child(1) {
  width: 10.5%;
  position: absolute;
  top: 7%;
  left: 20.3%;
}
.card-content-container:nth-child(2) {
  width: 10.5%;
  position: absolute;
  top: 35%;
  left: 20.3%;
}
.card-content-container:nth-child(3) {
  width: 10.5%;
  position: absolute;
  top: 63%;
  left: 20.3%;
}
.card-content-container:nth-child(4) {
  width: 10.5%;
  position: absolute;
  top: 7%;
  left: 67.4%;
}
.card-content-container:nth-child(5) {
  width: 10.5%;
  position: absolute;
  top: 35%;
  left: 67.4%;
}
.card-content-container:nth-child(6) {
  width: 10.5%;
  position: absolute;
  top: 63%;
  left: 67.4%;
}
</style>
